﻿@layout HomeLayout
@page "/"
@inject ExampleService ExampleService

<PageTitle>@ExampleService.TitleFor(null)</PageTitle>
<HeadContent>
    <meta name="description" content="@ExampleService.DescriptionFor(null)">
</HeadContent>

<div class="demos-home light rz-px-6 rz-px-md-12">
  <RadzenStack Orientation="Orientation.Vertical" Gap="0px" class="rz-mx-auto" Style="max-width: 1280px;">
    <RadzenRow>
      <RadzenColumn Size="12" SizeXS="4" class="rz-text-align-center rz-text-align-xs-start" >
        <a href="/" title="Radzen" class="logo">
          <svg width="159" height="48" viewBox="0 0 159 48" xmlns="http://www.w3.org/2000/svg">
            <title>Radzen</title>
            <path fill-rule="evenodd" clip-rule="evenodd" d="M24 48C37.2548 48 48 37.2548 48 24C48 10.7452 37.2548 0 24 0C10.7452 0 0 10.7452 0 24C0 33.2471 5.22967 41.2727 12.8927 45.2806L12.9076 45L12.3524 34.5H18.6762C18.6762 34.5 18.0676 39.3023 18.0676 45C18.0676 45.7764 18.0794 46.5361 18.0999 47.2694C19.9875 47.7465 21.9641 48 24 48ZM26.0374 15.8672C23.5258 17.3173 22.2005 19.7361 21.6842 20.8864L18.0789 23.8326C18.0715 23.3953 18.0676 22.9504 18.0676 22.5C18.0676 16.8023 18.7054 12 18.7054 12H12.3524C12.3524 12 12.9076 16.8023 12.9076 22.5C12.9076 28.1978 12.3524 33 12.3524 33H18.7054C18.7054 33 18.2305 29.4247 18.1003 24.7837L18.6866 24.3045C19.2065 25.0083 20.6065 26.577 23.1241 27.2144C26.4178 28.0484 32.4477 27.4971 32.4477 27.4971C32.4477 27.4971 27.3249 24.4658 24.0312 23.6319C22.1341 23.1516 20.5708 23.331 19.586 23.5696L22.0331 21.5699C23.2065 21.6061 25.8972 21.5159 28.5406 20.2028C32.0573 18.4559 38.9603 11.4072 38.9603 11.4072C38.9603 11.4072 29.4209 13.9137 26.0374 15.8672Z" fill="#FF504D"/>
            <path fill-rule="evenodd" clip-rule="evenodd" d="M92.2121 32.5896L92.2104 32.5876C90.8999 30.9401 90.2554 28.6519 90.2554 25.7441C90.2554 24.3095 90.459 23.0132 90.8691 21.8574L90.8701 21.8545C91.3024 20.7036 91.8688 19.7276 92.5711 18.9298C93.2717 18.1339 94.0709 17.5169 94.9686 17.0809L94.9701 17.0802C95.8914 16.6445 96.8395 16.4257 97.813 16.4257C98.8261 16.4257 99.6942 16.6061 100.41 16.9753C101.013 17.266 101.613 17.6536 102.212 18.1365L102.089 15.7094V10.7027H106.508V34.6013H102.822L102.547 32.7801C101.92 33.3848 101.196 33.9026 100.378 34.3339C99.5016 34.7955 98.5748 35.027 97.5997 35.027C95.3511 35.027 93.5493 34.2157 92.2121 32.5896ZM100.386 20.4377L100.384 20.437C99.8339 20.2309 99.2732 20.1283 98.7013 20.1283C97.6213 20.1283 96.7079 20.5964 95.9537 21.5547C95.2035 22.5078 94.8166 23.8848 94.8166 25.7086C94.8166 27.584 95.1459 28.9879 95.7823 29.9421C96.4354 30.8626 97.3654 31.3245 98.5947 31.3245C99.8201 31.3245 100.984 30.7224 102.089 29.477V21.4918C101.504 20.9845 100.936 20.6353 100.386 20.4377ZM60 16.8514H63.6938L63.963 19.7739C64.5612 18.7425 65.277 17.9415 66.113 17.3773C67.0125 16.7466 67.945 16.4257 68.9079 16.4257H70.7088V20.412H69.0471C67.9903 20.412 67.1619 20.5458 66.3042 21.1613L66.3013 21.1633C65.5865 21.6539 64.9553 22.5328 64.4191 23.8261V34.6013H60V16.8514ZM109.615 34.6013V32.184L117.709 20.412H109.615V16.8514H123.309V19.233L115.249 31.0052H123.309V34.6013H109.615ZM143.373 34.6013V16.8514H147.063L147.34 19.1308C148.098 18.4118 148.911 17.79 149.779 17.2656L149.78 17.2646C150.733 16.7038 151.829 16.4257 153.063 16.4257C154.972 16.4257 156.392 17.043 157.285 18.3043C158.166 19.5264 158.595 21.2689 158.595 23.5093V34.6013H154.176V24.0414C154.176 22.6051 153.962 21.6342 153.568 21.088C153.182 20.5537 152.543 20.2701 151.606 20.2701C150.877 20.2701 150.233 20.4516 149.67 20.8116L149.669 20.8125C149.127 21.1507 148.501 21.658 147.792 22.3385V34.6013H143.373ZM74.1386 33.5969L74.1371 33.5954C73.1462 32.6137 72.6557 31.3272 72.6557 29.7526C72.6557 28.8068 72.8517 27.9631 73.2484 27.2261L73.2493 27.2244C73.671 26.4625 74.3135 25.8163 75.1687 25.2837L75.1705 25.2826C76.0464 24.7523 77.1357 24.3096 78.4348 23.952L78.4356 23.9518C79.7205 23.6046 81.24 23.337 82.9928 23.148C82.9625 22.7687 82.8965 22.4084 82.795 22.0667L82.7934 22.0613L82.7922 22.0558C82.7022 21.6544 82.5346 21.313 82.291 21.0277L82.2865 21.0225L82.2825 21.017C82.0634 20.7131 81.767 20.4835 81.3879 20.3288L81.3841 20.3272L81.3804 20.3255C81.0027 20.1494 80.5271 20.0573 79.9469 20.0573C79.1098 20.0573 78.2835 20.2184 77.4669 20.5419C76.6639 20.8696 75.8721 21.2677 75.0916 21.7363L74.9436 21.8252L73.2809 18.805L73.4138 18.7215C74.4032 18.0998 75.5118 17.5628 76.7386 17.11C77.9759 16.6533 79.3084 16.4257 80.7346 16.4257C82.9634 16.4257 84.6522 17.0869 85.7669 18.4359C86.8996 19.754 87.453 21.6549 87.453 24.1123V34.6013H83.7421L83.4623 32.7304C82.6934 33.3641 81.8687 33.8991 80.9883 34.3353C80.0806 34.797 79.0881 35.027 78.0135 35.027C76.4267 35.027 75.1295 34.5542 74.1386 33.5969ZM81.191 31.0261C81.7574 30.7119 82.3614 30.264 83.003 29.6794V26.0383C81.8971 26.1768 80.9661 26.3569 80.2083 26.5778C79.4053 26.8117 78.7639 27.0786 78.2795 27.3757L78.277 27.3773L78.2745 27.3787C77.7911 27.6523 77.4589 27.9643 77.263 28.3093C77.0621 28.6633 76.9625 29.0371 76.9625 29.4333C76.9625 30.1791 77.1889 30.6886 77.6114 31.0026C78.0538 31.3313 78.6252 31.5018 79.3383 31.5018C80.0276 31.5018 80.643 31.3428 81.1885 31.0275L81.191 31.0261ZM130.187 34.4128L130.184 34.4117C129.121 33.9778 128.191 33.3625 127.393 32.5662C126.594 31.7687 125.966 30.8035 125.508 29.6731L125.507 29.6692C125.072 28.5122 124.857 27.203 124.857 25.7441C124.857 24.3075 125.085 23.0092 125.544 21.8517C126 20.6997 126.603 19.7234 127.354 18.9257L127.356 18.9238C128.128 18.1284 129.011 17.5128 130.002 17.0782C130.994 16.6437 132.011 16.4257 133.054 16.4257C134.257 16.4257 135.323 16.6299 136.249 17.0432C137.171 17.4552 137.939 18.0381 138.548 18.792C139.179 19.5439 139.651 20.4391 139.965 21.4746C140.278 22.5091 140.434 23.637 140.434 24.8573C140.434 25.2637 140.368 26.009 140.368 26.009C140.368 26.009 140.302 26.6565 140.252 26.8799L140.223 27.0101H129.192C129.398 28.4506 129.921 29.555 130.75 30.3396C131.639 31.1351 132.769 31.5373 134.155 31.5373C134.897 31.5373 135.578 31.4333 136.198 31.2271C136.848 30.9951 137.488 30.6815 138.118 30.2858L138.268 30.1914L139.811 33.0358L139.683 33.1197C138.842 33.6717 137.906 34.1268 136.875 34.4857C135.838 34.8467 134.754 35.027 133.622 35.027C132.395 35.027 131.25 34.8228 130.187 34.4128ZM135.693 21.02L135.691 21.0177C135.162 20.291 134.33 19.9154 133.16 19.9154C132.162 19.9154 131.29 20.265 130.538 20.9701C129.826 21.6375 129.362 22.6114 129.159 23.9106H136.546C136.523 22.6664 136.233 21.7097 135.695 21.0222L135.693 21.02Z" fill="var(--rz-text-title-color)"/>
          </svg>
        </a>
      </RadzenColumn>
      <RadzenColumn SizeXS="8" class="rz-display-none rz-display-xs-block rz-text-align-end nav-links rz-align-items-center" >
        <a href="/docs/" title="Radzen Blazor Components Documentation" target="_blank">Documentation</a>
        <a href="https://www.radzen.com/" title="Create .NET Core web applications fast & easy" target="_blank">About Radzen</a>
        <a href="https://github.com/radzenhq/radzen-blazor" title="GitHub" target="_blank">
          <svg width="28" height="28" viewBox="0 0 512 499.36" xmlns="http://www.w3.org/2000/svg">
            <title>GitHub</title>
            <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"></path>
          </svg>
        </a>
      </RadzenColumn>
    </RadzenRow>

    <RadzenRow>
      <RadzenColumn Size="12" class="rz-text-align-center">
        <RadzenText TextStyle="TextStyle.DisplayH2" TagName="TagName.H1" class="rz-my-12 rz-pt-12" Style="--rz-text-display-h2-font-weight: 600;">Radzen Blazor Components</RadzenText>
        <RadzenText TextStyle="TextStyle.DisplayH5" TagName="TagName.H2" Style="--rz-text-display-h5-font-weight: normal;">A set of <strong>70+ free and open source</strong> native Blazor UI controls.</RadzenText>
        <RadzenStack Orientation="Orientation.Horizontal" JustifyContent="JustifyContent.Center" Gap="1.5rem" Wrap="FlexWrap.Wrap" class="rz-mt-12">
          <NavLink class="cta-button primary" href="/get-started">Get started</NavLink>
          <Anchor class="cta-button" href="#components">Components</Anchor>
        </RadzenStack>
      </RadzenColumn>
    </RadzenRow>
    <RadzenRow Class="rz-pt-12 rz-my-10">
      <RadzenColumn Size="12">
        <RadzenStack Orientation="Orientation.Horizontal" JustifyContent="JustifyContent.Center" Gap="2rem" Wrap="FlexWrap.Wrap">
          <a href="https://github.com/radzenhq/radzen-blazor/">
            <img alt="Star Radzen on GitHub" src="https://img.shields.io/github/stars/radzenhq/radzen-blazor?color=ff504d&logo=github&style=for-the-badge" style="border-radius: 20px;" />
          </a>
          <a href="https://github.com/radzenhq/radzen-blazor/graphs/contributors">
            <img alt="Github Contributors" src="https://img.shields.io/github/contributors/radzenhq/radzen-blazor?color=ff504d&logo=github&style=for-the-badge" style="border-radius: 20px;" />
          </a>
          <a href="https://www.nuget.org/packages/Radzen.Blazor">
            <img alt="Nuget Downloads" src="https://img.shields.io/nuget/dt/Radzen.Blazor?color=ff504d&label=nuget%20downloads&logo=nuget&style=for-the-badge" style="border-radius: 20px;" />
          </a>
          <a href="https://github.com/radzenhq/radzen-blazor/blob/master/LICENSE">
            <img alt="License - MIT" src="https://img.shields.io/github/license/radzenhq/radzen-blazor?color=ff504d&logo=github&style=for-the-badge" style="border-radius: 20px;" />
          </a>
          <img alt="Last Commit" src="https://img.shields.io/github/last-commit/radzenhq/radzen-blazor?color=ff504d&logo=github&style=for-the-badge" style="border-radius: 20px;" />
        </RadzenStack>
      </RadzenColumn>
    </RadzenRow>

    <RadzenCard class="rz-mt-12 rz-p-12 rz-border-radius-3 rz-shadow-1 rz-background-color-white">
      <RadzenRow AlignItems="AlignItems.Center">
        <RadzenColumn SizeSM="2">
          <RadzenText TextStyle="TextStyle.Overline" TagName="TagName.H3" class="rz-color-base-700" style="font-size: 1rem">Trusted by:</RadzenText>
        </RadzenColumn>
        <RadzenColumn SizeSM="10" class="customers-logos">
          <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" JustifyContent="JustifyContent.SpaceAround" Wrap="FlexWrap.Wrap" Gap="2.5rem">
          <img src="images/microsoft.svg" />
          <img src="images/porsche.svg" style="height: 70px;" />
          <img class="square" src="images/nasa.svg" />
          <img src="images/allianz.svg" />
          <img class="square" src="images/dell.svg" />
          <img class="square" src="images/shell.svg" />
          <img src="images/accenture.svg" />
          <img src="images/eurobank.svg" />
          <img src="images/nokia.svg" style="height: 20px;" />
          <img src="images/DHL.svg" />
          <img src="images/konica-minolta.svg" style="height: 40px;" />
          <img src="images/siemens.svg" style="height: 20px;" />
          <img src="images/deloitte.svg" style="height: 26px;" />
          </RadzenStack>
        </RadzenColumn>
      </RadzenRow>
    </RadzenCard>

    <RadzenRow>
      <RadzenColumn Size="12">
        <RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2" TextAlign="TextAlign.Center" class="rz-my-12 rz-pt-6" style="--rz-text-h5-font-weight: 100;">Why choose Radzen Blazor Components?</RadzenText>
        <RadzenRow Gap="6rem">
          <RadzenColumn SizeSM="4">
            <RadzenText TextStyle="TextStyle.H4" TagName="TagName.H3" class="rz-mb-6 rz-text-align-start rz-text-align-sm-center" >Free</RadzenText>
            <RadzenText TextStyle="TextStyle.Body1">Radzen Blazor Components are open source and free for commercial use. You can install them from nuget or build your own copy from source.</RadzenText>
            <RadzenText TextStyle="TextStyle.Body1">Paid support is available as part of the <a href="https://www.radzen.com/blazor-studio/pricing/">Radzen Professional subscription</a></RadzenText>
          </RadzenColumn>
          <RadzenColumn SizeSM="4">
            <RadzenText TextStyle="TextStyle.H4" TagName="TagName.H3" class="rz-mb-6 rz-text-align-start rz-text-align-sm-center" >Native</RadzenText>
            <RadzenText TextStyle="TextStyle.Body1">The components are implemented in C# and take full advantage of the Blazor framework.</RadzenText>
            <RadzenText TextStyle="TextStyle.Body1">They do not depend on or wrap existing JavaScript frameworks or libraries.</RadzenText>
            <RadzenText TextStyle="TextStyle.Body1">Both server-side and client-side (WASM) Blazor are supported.</RadzenText>
          </RadzenColumn>
          <RadzenColumn SizeSM="4">
            <RadzenText TextStyle="TextStyle.H4" TagName="TagName.H3" class="rz-mb-6 rz-text-align-start rz-text-align-sm-center" >Growing</RadzenText>
            <RadzenText TextStyle="TextStyle.Body1">We add new components and features on a regular basis.</RadzenText>
            <RadzenText TextStyle="TextStyle.Body1">Short development cycle. We release as soon as new stuff is available. No more quarterly releases.</RadzenText>
          </RadzenColumn>
        </RadzenRow>
      </RadzenColumn>
    </RadzenRow>

    <RadzenRow class="rz-text-align-center" ID="components">
      <RadzenColumn Size="12">
        <RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-my-12 rz-pt-3" style="--rz-text-h5-font-weight: 100;" >Most Popular Components</RadzenText>

        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" JustifyContent="JustifyContent.SpaceAround" Wrap="FlexWrap.Wrap" Gap="3rem">
          <div class="popular-components">
            <a href="/datagrid">
              <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" class="component-icon">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M16 0H0V16H16V0ZM15 1H11V5H15V1ZM15 6H11V10H15V6ZM15 11H11V15H15V11ZM10 11V15H6V11H10ZM10 6V10H6V6H10ZM10 1V5H6V1H10ZM5 1H1V5H5V1ZM5 6H1V10H5V6ZM5 11H1V15H5V11Z" fill="currentColor"/>
              </svg>
              DataGrid
            </a>
          </div>
          <div class="popular-components">
            <a href="/scheduler">
              <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" class="component-icon">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M3 0H4V2H12V0H13V2H16V16H0V2H3V0ZM12 3V4H13V3H15V15H1V3H3V4H4V3H12ZM3 13V6H7V13H3ZM4 12V7H6V12H4ZM9 6H13V10H9V6ZM10 9V7H12V9H10Z" fill="currentColor"/>
              </svg>
              Scheduler
            </a>
          </div>
          <div class="popular-components">
            <a href="/dropdown">
              <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" class="component-icon">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H13V1H0V0ZM14 0H16V1H14V0ZM0 3H16V16H0V3ZM1 4H15V15H1V4ZM14 5H13V10H14V5ZM11 6H3V7H11V6ZM11 9H3V10H11V9ZM3 12H11V13H3V12Z" fill="currentColor"/>
              </svg>
              DropDown
            </a>
          </div>
          <div class="popular-components">
            <a href="/dialog">
              <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" class="component-icon">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M0 0V16H16V0H0ZM15 1H1V15H15V1ZM8 3H3V4H8V3ZM13 7V6H3V7H13ZM13 12H10V13H13V12ZM3 8H13V9H3V8ZM12 3H13V4H12V3ZM9 12H6V13H9V12Z" fill="currentColor"/>
              </svg>
              Dialog
            </a>
          </div>
          <div class="popular-components">
            <a href="/datepicker">
              <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" class="component-icon">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M0 13V3H16V13H0ZM1 4H15V12H1V4ZM6.89778 10H8.05248L10.3619 6H9.20718L6.89778 10ZM6 9H3V10H6V9ZM10 9H13V10H10V9Z" fill="currentColor"/>
              </svg>
              DatePicker
            </a>
          </div>
          <div class="popular-components">
            <a href="/area-chart">
              <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" class="component-icon">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M9 10L6 7L0 13V16L16 16L16 3L9 10ZM15 5.41421L9 11.4142L6 8.41421L1 13.4142L1 15L15 15L15 5.41421Z" fill="currentColor"/>
              </svg>
              Chart
            </a>
          </div>
        </RadzenStack>

        <RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-mt-12 rz-mb-6 rz-pt-3" style="--rz-text-h5-font-weight: 100;" >All Components</RadzenText>

        <RadzenRow class="all-components rz-text-align-start">
          <RadzenColumn Size="12" SizeSM="4">
            <RadzenRow>
              <RadzenColumn Size="12" SizeLG="6">
                <RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.H3" class="rz-mt-6">Data</RadzenText>
                <ul>
                  <li><a href="/datagrid">DataGrid</a><RadzenBadge Text="Updated" BadgeStyle="BadgeStyle.Info" Shade="Shade.Lighter" /></li>
                  <li><a href="/datalist">DataList</a></li>
                  <li><a href="/datafilter">DataFilter</a></li>
                  <li><a href="/pager">Pager</a></li>
                  <li><a href="/scheduler">Scheduler</a><RadzenBadge Text="Updated" BadgeStyle="BadgeStyle.Info" Shade="Shade.Lighter" /></li>
                  <li><a href="/tree">Tree</a></li>
                </ul>
                <RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.H3" class="rz-mt-6">UI Fundamentals</RadzenText>
                <ul>
                  <li><a href="/themes">Themes</a></li>
                  <li><a href="/colors">Colors</a></li>
                  <li><a href="/typography">Typography</a></li>
                  <li><a href="/icon">Icons</a></li>
                  <li><a href="/borders">Borders</a></li>
                  <li><a href="/shadows">Shadows</a></li>
                  <li><a href="/ripple">Ripple</a></li>
                  <li><a href="/breakpoints">Breakpoints</a></li>
                  <li><a href="/spacing">Spacing</a></li>
                </ul>
                <RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.H3" class="rz-mt-6">Images</RadzenText>
                <ul>
                  <li><a href="/gravatar">Gravatar</a></li>
                  <li><a href="/image">Image</a></li>
                </ul>
              </RadzenColumn>
              <RadzenColumn Size="12" SizeLG="6">
                <RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.H3" class="rz-mt-6">Layout</RadzenText>
                <ul>
                  <li><a href="/layout">Layout</a></li>
                  <li><a href="/stack">Stack</a></li>
                  <li><a href="/row">Row</a></li>
                  <li><a href="/column">Column</a></li>
                  <li><a href="/card">Card</a><RadzenBadge Text="Updated" BadgeStyle="BadgeStyle.Info" Shade="Shade.Lighter" /></li>
                  <li><a href="/dialog">Dialog</a></li>
                  <li><a href="/panel">Panel</a></li>
                  <li><a href="/splitter">Splitter</a></li>
                </ul>
                <RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.H3" class="rz-mt-6">Navigation</RadzenText>
                <ul>
                  <li><a href="/accordion">Accordion</a></li>
                  <li><a href="/breadcrumb">BreadCrumb</a></li>
                  <li><a href="/contextmenu">ContextMenu</a></li>
                  <li><a href="/link">Link</a></li>
                  <li><a href="/login">Login</a></li>
                  <li><a href="/menu">Menu</a></li>
                  <li><a href="/panelmenu">PanelMenu</a></li>
                  <li><a href="/profile-menu">ProfileMenu</a></li>
                  <li><a href="/steps">Steps</a></li>
                  <li><a href="/tabs">Tabs</a></li>
                </ul>
              </RadzenColumn>
            </RadzenRow>
          </RadzenColumn>
          <RadzenColumn Size="12" SizeSM="4" SizeLG="4">
            <RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.H3" class="rz-mt-6">Forms</RadzenText>
            <RadzenRow RowGap="0px">
              <RadzenColumn SizeLG="6">
                <ul>
                  <li><a href="/autocomplete">AutoComplete</a></li>
                  <li><a href="/button">Button</a></li>
                  <li><a href="/checkbox">CheckBox</a></li>
                  <li><a href="/checkboxlist">CheckBoxList</a></li>
                  <li><a href="/colorpicker">ColorPicker</a></li>
                  <li><a href="/datepicker">DatePicker</a></li>
                  <li><a href="/dropdown">DropDown</a></li>
                  <li><a href="/dropdown-datagrid">DropDownDataGrid</a></li>
                  <li><a href="/fieldset">Fieldset</a></li>
                  <li><a href="/fileinput">FileInput</a></li>
                  <li><a href="/form-field">FormField</a><RadzenBadge BadgeStyle="BadgeStyle.Success" Text="New" /></li>
                  <li><a href="/html-editor">HTMLEditor</a></li>
                  <li><a href="/listbox">ListBox</a></li>
                  <li><a href="/mask">Mask</a></li>
                </ul>
              </RadzenColumn>
              <RadzenColumn SizeLG="6">
                <ul>
                  <li><a href="/numeric">Numeric</a></li>
                  <li><a href="/password">Password</a></li>
                  <li><a href="/radiobuttonlist">RadioButtonList</a></li>
                  <li><a href="/rating">Rating</a></li>
                  <li><a href="/selectbar">SelectBar</a></li>
                  <li><a href="/slider">Slider</a></li>
                  <li><a href="/speechtotextbutton">SpeechToTextButton</a><RadzenBadge BadgeStyle="BadgeStyle.Success" Text="New" /></li>
                  <li><a href="/splitbutton">SplitButton</a></li>
                  <li><a href="/switch">Switch</a></li>
                  <li><a href="/templateform">TemplateForm</a></li>
                  <li><a href="/textarea">TextArea</a></li>
                  <li><a href="/textbox">TextBox</a></li>
                  <li><a href="/example-upload">Upload</a></li>
                </ul>
              </RadzenColumn>
            </RadzenRow>
          </RadzenColumn>
          <RadzenColumn Size="12" SizeSM="4">
            <RadzenRow>
              <RadzenColumn Size="12" SizeLG="6">
                <RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.H3" class="rz-mt-6">Data Visualization</RadzenText>
                <ul>
                  <li><a href="/area-chart">Area Chart</a></li>
                  <li><a href="/bar-chart">Bar Chart</a></li>
                  <li><a href="/column-chart">Column Chart</a></li>
                  <li><a href="/donut-chart">Donut Chart</a></li>
                  <li><a href="/line-chart">Line Chart</a></li>
                  <li><a href="/pie-chart">Pie Chart</a></li>
                  <li><a href="/arc-gauge">Arc Gauge</a></li>
                  <li><a href="/radial-gauge">Radial Gauge</a></li>
                  <li><a href="/stacked-bar-chart">Stacked Bar Chart</a></li>
                  <li><a href="/stacked-column-chart">Stacked Column Chart</a></li>
                  <li><a href="/timeline">Timeline</a><RadzenBadge BadgeStyle="BadgeStyle.Success" Text="New" /></li>
                  <li><a href="/googlemap">GoogleMap</a></li>
                </ul>
              </RadzenColumn>
              <RadzenColumn Size="12" SizeLG="6">
                <RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.H3" class="rz-mt-6">Feedback</RadzenText>
                <ul>
                  <li><a href="/alert">Alert</a></li>
                  <li><a href="/badge">Badge</a></li>
                  <li><a href="/notification">Notification</a></li>
                  <li><a href="/progressbar">ProgressBar</a></li>
                  <li><a href="/progressbarcircular">ProgressBarCircular</a><RadzenBadge BadgeStyle="BadgeStyle.Success" Text="New" /></li>
                  <li><a href="/tooltip">Tooltip</a></li>
                </ul>
                <RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.H3" class="rz-mt-6" style="--rz-text-subtitle1-font-weight: 600;">Validators</RadzenText>
                <ul>
                  <li><a href="/comparevalidator">CompareValidator</a></li>
                  <li><a href="/emailvalidator">EmailValidator</a></li>
                  <li><a href="/lengthvalidator">LengthValidator</a></li>
                  <li><a href="/numericrangevalidator">NumericRangeValidator</a></li>
                  <li><a href="/regexvalidator">RegexValidator</a></li>
                  <li><a href="/requiredvalidator">RequiredValidator</a></li>
                  <li><a href="/customvalidator">CustomValidator</a><RadzenBadge BadgeStyle="BadgeStyle.Success" Text="New" /></li>
                </ul>
              </RadzenColumn>
            </RadzenRow>
          </RadzenColumn>
        </RadzenRow>
      </RadzenColumn>
    </RadzenRow>
  </RadzenStack>
</div>
<div class="demos-home dark rz-px-6 rz-px-md-12">
  <RadzenStack Orientation="Orientation.Vertical" Gap="0px" class="rz-mx-auto rz-text-align-center" Style="max-width: 1280px;">
    <RadzenText TextStyle="TextStyle.DisplayH2" class="rz-mb-12" Style="--rz-text-display-h2-font-weight: 600;">Boost your Blazor development</RadzenText>
    <RadzenText TextStyle="TextStyle.DisplayH5" TagName="TagName.H3" class="rz-mb-12 rz-pb-2" Style="--rz-text-display-h5-font-weight: 100;">Radzen Blazor Studio provides tons of productivity gains for Blazor developers</RadzenText>
    <NavLink href="https://www.radzen.com/blazor-studio/" target="_blank" title="Explore Radzen Blazor Studio features"><img src="images/radzen-blazor-studio-dark.png" width="100%" /></NavLink>
    <RadzenRow Gap="3rem" class="rz-mt-12 radzen-features rz-text-align-start">
      <RadzenColumn SizeSM="6" SizeLG="5" OffsetLG="1">
        <ul>
          <li>Quickly create Blazor pages with familiar WYSIWYG Blazor designer.</li>
          <li>Scaffold a complete CRUD application from your MSSQL, MySQL, Postgres or Oracle database.</li>
          <li>Get access to the premium themes.</li>
          <li>Customize the Radzen Blazor Components look and feel to match your or your customer's branding.</li>
        </ul>
      </RadzenColumn>
      <RadzenColumn SizeSM="6" SizeLG="5">
          <ul>
          <li>Authentication, authorization, user and role management are built-in. Azure AD, Active Directory, Windows Authentication or ASP.NET Identity.</li>
          <li>Run your Radzen Blazor application directly from Visual Studio Code or Visual Studio Professional.</li>
          <li>Deploy your Blazor applications to IIS and Azure with a single click.</li>
          <li>Dedicated support with 24 hour response time (or even less).</li>
          <li>Get help from the active <a href="https://forum.radzen.com/" target="_blank">community</a>.</li>
        </ul>
      </RadzenColumn>
    </RadzenRow>
    <RadzenText TextStyle="TextStyle.DisplayH4" class="rz-mt-12 rz-mb-6">Get started today. Radzen Blazor Studio is free to use.</RadzenText>
    <RadzenText TextStyle="TextStyle.Body1">You can also test the premium features for 15 days.</RadzenText>
    <RadzenStack Orientation="Orientation.Horizontal" JustifyContent="JustifyContent.Center" Gap="1.5rem" Wrap="FlexWrap.Wrap" class="rz-mt-12">
      <NavLink class="cta-button primary" href="https://www.radzen.com/blazor-studio/download/" target="_blank" title="Get Radzen Blazor Studio for Windows, Mac or Linux">Download Now</NavLink>
      <NavLink class="cta-button" href="https://www.radzen.com/blazor-studio/" target="_blank" title="Explore Radzen Blazor Studio features">Learn More</NavLink>
    </RadzenStack>
    <RadzenStack Orientation="Orientation.Vertical" JustifyContent="JustifyContent.Center" class="copyright">
      <a href="https://www.radzen.com" title="Create .NET Core web applications fast & easy" target="_blank"><img src="images/easier-than-you-think.svg" /></a>
      <p class="rz-mt-12">
        Radzen Blazor Components, &copy; 2018-2023 Radzen.<br />
        <a href="https://github.com/radzenhq/radzen-blazor" target="_blank">Source Code</a> licensed under
        <a href="https://github.com/radzenhq/radzen-blazor/blob/master/LICENSE" target="_blank">MIT</a>
      </p>
      <Social />
    </RadzenStack>
  </RadzenStack>
</div>